<template>
  <div>
    <article class="media">
      <figure class="media-left">
        <p class="image is-48x48">
          <img :src="item.userInfo.avatar_url" class="is-rounded">
          </img>
        </p>
      </figure>
      <article class="media-content">
        <div class="content">
          <div class="">
            <span v-if="item.userInfo.nickname">{{item.userInfo.nickname}}</span>
            <span v-else>{{item.userInfo.eos_address}}</span>
            <span class="tag is-warning">认证会员</span>
            <span v-if="item.eos_address=='ydappeosgame'" class="tag is-danger">官方</span>
            <span v-else-if="item.eos_address=='tmonomonomon'" class="tag is-danger">官方</span>
          </div>
          <div class=""> {{timestampToStr(item.approve_time)}} </div>
          <pre style="margin-top:1rem; background-color: #333742;" class="has-text-white">{{item.content}}</pre>
        </div>
      </article>
    </article>

    <article class="media">
      <figure class="media-left">
        <p class="image is-48x48">
          <router-link
            :to="{ name: 'User', params: {uid: post.user_info.id}}" target="_blank">
            <img class="is-rounded" :src="post.user_info.avatar_url">
          </router-link>
        </p>
      </figure>
      <article class="media-content">
        <div class="content">
          <div>
            <router-link
              :to="{ name: 'User', params:{uid: post.user_info.id}}" target="_blank">
              <strong>{{post.user_info.username}}</strong>
            </router-link>
            <span v-if="item.user_info.username == 'lucky917'" class="tag is-danger"> 官方 </span>
            <span v-if="item.user_info.username == 'lucky917'" class="tag is-success"> 组合高手 </span>
          </div>
          <div class="has-text-grey">
            <small>一小时前. 来自发言</small>
          </div>
          <pre class=""> {{post.content}} </pre>
        </div>
        <div>
          <nav class="level">
            <div class="level-left">
              <div class="level-item">
                <a class="iconfont icon-pinglun blacka" style="" @click="toggleCommentBox()">
                  评论({{post.comment_number}})
                </a>
              </div>

              <a class="level-item blacka">
                <i v-if="post.is_like" class="iconfont icon-zan" style="color: #f70;"
                   @click="togglePostLike(post.id)"></i>
                <i v-else class="iconfont icon-zan" style="" @click="togglePostLike(post.id)"></i>
                赞({{post.like_number}})
              </a>
              <a class="level-item blacka">
                <div v-if="post.user_info.id==user.id"
                     @click="deletePost(post.id)">删除</div>
              </a>
            </div>
          </nav>
        </div>
        <div id="comment-box" style="display: none;">
          <article class="media">
            <figure class="media-left">
              <p class="image is-32x32">
                <img v-if="user" class="is-rounded" :src="user.avatar_url">
              </p>
            </figure>
            <div class="media-content">
              <div class="field">
                <div class="columns">
                  <div class="column is-8">
                  <textarea class="textarea" id="post-comment" rows="1" type="text" placeholder="吐槽致富 (`・ω・´) "
                            width="50%"></textarea>
                  </div>
                </div>
              </div>
              <div class="columns">
                <div class="column is-6"></div>
                <div class="column is-2">
                  <nav class="level">
                    <div class="level-item">
                      <div class="button" @click="cancelSendPostComment()">
                        取消
                      </div>
                    </div>
                    <div class="level-item">
                      <div class="button is-success" @click="sendPostComment()">
                        发布
                      </div>
                    </div>
                  </nav>
                </div>
              </div>
            </div>
          </article>
          <div> 全部评论({{post.comment_number}})</div>
          <article v-for="comment in this.post.comment_list" class="media">
            <figure class="media-left">
              <p class="image is-32x32">
                <router-link
                  :to="{ name: 'User', params: {uid: comment.user_info.id}}" target="_blank">
                  <img class="is-rounded" :src="comment.user_info.avatar_url">
                </router-link>
              </p>
            </figure>
            <div class="media-content">
              <div class="content">
                <div>
                  <router-link
                    :to="{ name: 'User', params:{uid: comment.user_info.id}}" target="_blank">
                    <strong>{{comment.user_info.username}}</strong>
                  </router-link>
                </div>
                <div class=""> {{comment.content}} </div>
              </div>
            </div>
          </article>
        </div>
      </article>
    </article>
    <hr style="padding: 0rem; margin: 0.5rem; height:1px;background-color: #f0f0f0;"></hr>
  </div>
</template>

<script>
  import {getTokenPrice, getMe, sendPost, getPostList, togglePostLike, sendPostComment, deletePost} from '@/api.js';
  import swal from 'sweetalert';

  export default {
    name: 'post-detail',
    props: ['item'],

    data() {
      return {}
    },

    computed: {},

    methods: {
      timestampToStr(timestamp) {
        timestamp += 8*60*60;
        var result = new Date(parseInt(timestamp) * 1000).toISOString().replace('T', ' ').slice(10,16);
        return result;
      },
      toggleCommentBox() {
        $("#comment-box").toggle();
      },
      cancelSendPostComment() {
        $("#comment-box").hide();
      },
      async sendPostComment() {
        const content = $("#post-comment").val();
        if (!content) {
          swal("评论失败", "发帖不能为空", "error");
        }
        const result = await sendPostComment(this.post.id, content);
        if (result.err_code != 0) {
          swal("评论失败", result.err_msg, "error");
          return;
        } else {
          swal("评论成功", "(•̀ᴗ•́)و ̑̑", "success");
          this.post.comment_number = result.post.comment_number;
          this.post.comment_list = result.post.comment_list;
          $("#post-comment").val("");
        }
      },
      async deletePost(post_id) {
        const result = await deletePost(post_id);
        if (result.err_code == 0) {
          alert('delete success');
          location.reload();
        } else {
          swal("删除失败", result.err_msg, "error");
        }
        alert(JSON.stringify(result));
      },
      async togglePostLike(post_id) {
        if (this.post.is_like) {
          this.post.is_like = false;
          this.post.like_number -= 1;
        } else {
          this.post.is_like = true;
          this.post.like_number += 1;
        }
        const result = await togglePostLike(post_id);
        if (result.err_code != 0) {
          swal("点赞失败", result.err_msg, "error");
        }
      },
    },

    created() {
    },

    watch: {},
  };
</script>
<style scoped>
  .banner-image {
    border-radius: 10px;
  }

  .blacka {
    color: #000000;
  }
  pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
  }
</style>
